<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件</title>
</head>
<body>

<div id="app">
    <h1>学生信息展示</h1>
<!--    使用组件-->
<!--    lisi-->
    <Student :name="student.name" :age="student.age" :sex="student.sex" v-for="student in students"></Student>

<!--&lt;!&ndash;    张三&ndash;&gt;-->
<!--    <Student name="张三" age="25" sex="男"></Student>-->
<!--&lt;!&ndash;    王五&ndash;&gt;-->
<!--    <Student name="王五" age="30" sex="男"></Student>-->
</div>
<script src="../vue.js"></script>
<script>

    /*
    * 组件使用的步骤
    * 1.创建组件
    * 2.注册组件
    *       1.全局注册   Vue上   在任何地方均可使用
    *       2.局部注册   在哪里注册 在哪里使用
    * 3.使用组件
    * */
    // 定义组件实现结构的复用
    const Student = {
        template:`
         <div>
            <p>学生姓名:{{name}}</p>
            <p>学生年龄:{{age}}</p>
            <p>学生性别:{{sex}}</p>
         </div>
        `,
        data(){ //   定义组件时  data需要写成函数的形式
            return{
                // name:'张三',
                // age:20,
                // sex:'男'
            }
        },
        props:["name","age","sex"]   // 单向数据流
    }


    const vm = new Vue({
        el:'#app',
        data:{
            students:[
                {
                    name:'lisi',
                    age:30,
                    sex:"男"
                },
                {
                    name:'张三',
                    age:30,
                    sex:"男"
                },
                {
                    name:'王五',
                    age:30,
                    sex:"男"
                }

            ]

        },
        methods:{},
        components:{  //  注册组件
            // Student:Student
            Student
        }
    })
</script>
</body>
</html>